<template>
  <h3>provide 与 inject</h3>
  <h5>当前颜色：{{ color }}</h5>
  <button @click="color='red'">红色</button>
  <button @click="color='yellow'">黄色</button>
  <button @click="color='green'">绿色</button>
  <ProvideSon></ProvideSon>
</template>
<script lang='ts'>
  import { defineComponent, provide, ref} from 'vue';
  import ProvideSon from './ProvideSon.vue'
  export default defineComponent({
    name:'ProvideParent',
    components:{ProvideSon},
    setup(){
      //响应式的数据
      const color = ref('red')
      // 提供数据
      provide('color',color)
      return{
        color
      }
    }
  })
</script>
<style scoped>
</style>